<template>
  <view class="content">
    <view
      :style="{
        //  width:'100%',
        // height: statusBarHeight + 'px',
        // background:'white',
        // position:'fixed',
        // top:0,
        // zIndex:100,
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
        // background:'white',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text"
        ><text class="name">“{{ name }}”</text>的星云共创</view
      >
    </view>
    <view class="tabs_box" :style="{ marginTop: tabMargin + 'px' }">
      <u-tabs
        class="tabs"
        :list="list1"
        @click="click"
        :activeStyle="{
          color: '#444',
          transform: 'scale(1.05)',
          'font-size': '32rpx',
        }"
        lineWidth="0"
        :itemStyle="{
          width: '144rpx',
          height: '56rpx',
          background: '#F7F8FA',
          color: '#888',
          'font-size': '28rpx',
          'border-radius': '32rpx',
          margin: '0 8rpx',
        }"
        :inactiveStyle="{
          color: '#888888',
          transform: 'scale(1)',
          'font-size': '32rpx',
        }"
      ></u-tabs>
    </view>
    <scroll-view
      scroll-y="true"
      :style="{
        height: scrollHeight + 'px',
      }"
    >
      <view class="box_title">
        <view class="head_title">
          <view class="title_t"> "{{ name }}"的{{ text }} </view>
          <view class="title_b"> {{ user_count }} 成员 </view>
        </view>
      </view>
      <view class="box_t">
        <Fly
          v-if="currentIndex == 0"
          :type="'coCreate'"
          :list="list"
          :my_level_id="my_level_id"
        ></Fly>
        <inspirationTower
          :isInp="true"
          v-if="currentIndex == 1"
          :list="list"
          :my_level_id="my_level_id"
        ></inspirationTower>
        <poem
          :isInp="true"
          v-if="currentIndex == 2"
          :list="list"
          :my_level_id="my_level_id"
        ></poem>
        <text-island
          :isInp="true"
          v-if="currentIndex == 3"
          :list="list"
          :my_level_id="my_level_id"
        ></text-island>
        <star
          v-if="currentIndex == 4"
          :list="list"
          :my_level_id="my_level_id"
        ></star>
        <log-list
          v-if="currentIndex == 5"
          :isInput="true"
          :list="list"
          source="gong"
          color1="rgb(68, 68, 68)"
          :my_level_id="my_level_id"
        ></log-list>
      </view>
      
      <view style="height: 200rpx"></view>
    </scroll-view>
    <view class="create_to" @click="toCreate">
      <image src="@/static/images/icon_xygc_fld_chuangjian.png" mode=""></image>
    </view>

    <u-modal
      :show="showMod"
      title="等级不足"
      :content="contentMod"
      @confirm="confirmMod"
      confirmText="去开通"
      :showCancelButton="true"
      :closeOnClickOverlay="true"
      @close="showMod = false"
      @cancel="showMod = false"
    ></u-modal>

    <floatingBall></floatingBall>
  </view>
</template>

<script>
import Fly from "@/components/search/Fly.vue"; //飞离洞
import inspirationTower from "@/components/search/InspirationTower.vue"; //灵感塔
import poem from "@/components/search/poem.vue"; //诗心园
import textIsland from "@/components/search_co/text_island.vue"; //文心岛
import star from "@/components/search_co/star.vue"; //星河
import logList from "@/components/logList.vue"; //游记
export default {
  components: {
    Fly,
    inspirationTower,
    poem,
    textIsland,
    star,
    logList,
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      tabMargin: 0,
      name: "",
      list1: [
        {
          name: "飞离洞",
        },
        {
          name: "灵感塔",
        },
        {
          name: "诗心园",
        },
        {
          name: "文心岛",
        },
        {
          name: "星球",
        },
        {
          name: "游记",
        },
      ],
      scrollHeight: 0,
      currentIndex: 0,
      text: "飞离洞",
      user_count: 0,
      list: [],
      zid: "",
      id: "",
      xinghe_id: "",
      xinghe_zu: "",
      my_level_id: 0,
      showMod: false,
      contentMod: "请先开通行者身份",
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    const windowHeihgt = statusBarHeight.windowHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query.select(".head").fields({
        size: true,
      });
      query.select(".tabs_box").fields({
        size: true,
      });

      query.exec((data) => {
        let sum = 0;
        data.forEach((item) => {
          sum += item.height;
        });
        this.tabMargin = data[0].height + this.statusBarHeight;
        this.scrollHeight = windowHeihgt - sum;
        console.log(this.tabMargin, "tab到顶部高度");
        console.log(this.scrollHeight, "滚动高度");
        console.log(data, "所有");
        console.log(windowHeihgt, "总高度");
      });
    });
  },
  onLoad(options) {
    this.zid = options.zid;
    this.id = options.id;
    this.name = options.name;
  },
  onShow: function (a) {
    console.log(a, 111111111);
    if (this.currentIndex == 0) {
      this.getList(1);
    } else if (this.currentIndex == 1) {
      this.getList(2);
    } else if (this.currentIndex == 2) {
      this.getList(3);
    } else if (this.currentIndex == 3) {
      this.getList(4);
    } else if (this.currentIndex == 4) {
      this.getList(5);
    } else if (this.currentIndex == 5) {
      this.getList(6);
    }
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    click(e) {
      console.log("eeee", e);
      this.currentIndex = e.index;
      this.text = e.name;
      if (e.index == 0) {
        this.getList(1);
      } else if (e.index == 1) {
        this.getList(2);
      } else if (e.index == 2) {
        this.getList(3);
      } else if (e.index == 3) {
        this.getList(4);
      } else if (e.index == 4) {
        this.getList(5);
      } else if (e.index == 5) {
        this.getList(6);
      }
    },
    toCreate() {
      if (this.my_level_id == 0) {
        this.showMod = true;
      } else {
        if (this.currentIndex == 4) {
          if(this.xinghe_id == 0){
            uni.$u.toast('该词条暂未创建星球，请等待管理员创建后重试');
          } else {
            uni.navigateTo({
              url: `/pages/distinguish/createDiscuss?id=${this.xinghe_id}&source=1&zu_name=${this.xinghe_zu}`,
            });
          }
          
        } else {
          uni.navigateTo({
            url: `/pages/bigResult/gongchuang_create?zhangjie_id=${
              this.zid
            }&keywords=${this.name}&createType=${this.currentIndex + 1}`,
          });
        }
      }
    },
    getList(num) {
      this.$http
        .gongchuangGongList({
          type: num,
          keywords: this.name,
          zhangjie_id: this.zid,
          id: this.id,
        })
        .then((res) => {
          console.log(res, "共创-飞离洞");
          this.list = res.data.list.data;
          this.my_level_id = res.data.my_level_id;
          this.user_count = res.data.user_count;
          // if (
          //   res.data.list &&
          //   res.data.list.data.length > 0 &&
          //   res.data.list.data[0].xinghe_id
          // ) {
          //   console.log("星河id", res.data.list.data[0].xinghe_id);
          //   this.xinghe_id = res.data.list.data[0].xinghe_id;
          //   this.xinghe_zu = '共创';
          // }
          if(this.currentIndex == 4){
            this.xinghe_id = res.data.list.xingqiu.id;
            this.xinghe_zu = '共创';
          }
          
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 开通会员确定框
    confirmMod() {
      uni.navigateTo({
        url: `/pages/member/index`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  position: fixed;
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  // background: #fff;
  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;

    .name {
      font-size: 36rpx;
      font-weight: 400;
      color: #ee6060;
    }
  }
}
.tabs_box {
  padding: 20rpx 0;
  box-sizing: border-box;
}

.box_title {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  .head_title {
    width: 100%;
    height: 200rpx;
    margin: 0;
    background: url("/static/images/pic_xygc_bg.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 44rpx;
    padding: 42rpx 48rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title_t {
      font-size: 34rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
    .title_b {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
  }
}
.box_t {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.create_to {
  width: 124rpx;
  height: 124rpx;
  position: fixed;
  right: 30rpx;
  bottom: 240rpx;
  z-index: 100;
  image {
    width: 100%;
    height: 100%;
  }
}
</style>